/**
 * 泛娱区块链 - Mine
 * https://menger.me
 * @大梦
 */

'use strict';
import React from 'react'
import { StyleSheet, Text, View, TouchableOpacity } from 'react-native'
import NavigationBar from '../../component/navigation/NavigationBar'
import ListView from '../../component/list/ListView';
import ServicesApi from '../../config/ServicesApi';
import Images from '../../asset';
import ImageView from '../../component/common/ImageView';

class WestDetails extends React.Component {

    constructor(props) {
        super(props);
        this.state = { dataSource: [] };
        this.page = 1
    }

    componentDidMount() {
        this.requestDataSources();
    }

    componentWillMount() {
    }

    requestDataSources = async () => {
        const limit = 10
        let url = ServicesApi.FLASH_QUERY
        let data = {
            limit,
            page: this.page
        }
        const result = await Services.post(url, data)
        if (result.code === 0) {
            if (this.page === 1) {
                this.setState({ dataSource: result.data })
            } else if (this.page > 1 && result.data.length != 0) {
                let oldData = this.state.dataSource.slice()
                oldData = oldData.concat(result.data)
                this.setState({ dataSource: oldData })
            }
        }
        this._listViewRef && this._listViewRef.stopRefresh()
        this._listViewRef && this._listViewRef.stopEndReached({ allLoad: result.data.length < limit })

    };
    _onPressItem = (item, index) => {

    }

    _onRefresh = (stopRefresh) => {
        this.page = 1
        this.requestDataSources()
    };

    _onEndReached = (stopEndReached) => {
        this.page++
        this.requestDataSources()
    };


    _renderItem = ({ item, index }) => {
        let img_url = 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1544414819914&di=ee4fb1641e08812fb7582193c5854470&imgtype=0&src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F01f9ea56e282836ac72531cbe0233b.jpg%402o.jpg'
        return (
            <TouchableOpacity style={styles.itemView} onPress={this._onPressItem}>
                <View style={styles.itemContent}>
                    <View style={styles.itemInfoCon}>
                        <Text style={styles.titleText}>我是一个标题用来展示用的，哈哈</Text>
                        <View style={styles.bottomInfo}>
                            <Text style={styles.itemTime}>11-14 21:36</Text>
                        </View>
                    </View>
                    <ImageView style={styles.image} source={{ uri: img_url }} />
                </View>
            </TouchableOpacity>
        )
    };

    _keyExtractor = (item, index) => {
        return `item${index}`
    };

    _captureRef = (v) => {
        this._listViewRef = v
    };

    _renderItemSeparator = (info) => {
        return (
            <View style={styles.sep} />
        )
    };

    _renderHeader = () => {
        return (
            <View style={styles.headerContainer}>
                <View >
                    <ImageView style={styles.topImage} source={Images.icon_hot} />
                    <Text style={styles.topTitle}>我是一个标题栏</Text>
                </View>
                <Text style={styles.content}>详情内容详情内容详情内容详情详情内容详情详情内容详情详情内容详情详情内容详情详情内容详情详情内容详情详情内容详情详情内容详情详情内容详情详情内容详情详情内容详情详情内容详情详情内容详情详情内容详情详情内容详情详情内容详情详情内容详情详情内容详情详情内容详情详情内容详情详情内容详情详情内容详情详情内容详情详情内容详情详情内容详情详情内容详情详情内容详情详情内容详情详情内容详情详情内容详情详情内容详情详情内容详情详情内容详情详情内容详情详情内容详情详情内容详情详情内容详情详情内容详情内容详情内容详情内容详情内容详情内容</Text>

                <View style={styles.cutLine} />
            </View>
        )
    }

    render() {
        const { dataSource } = this.state
        return (
            <View style={styles.container}>
                <NavigationBar
                    title={'专题详情'}
                />
                <ListView
                    ref={this._captureRef}
                    initialRefresh={false}
                    enableLoadMore={true}
                    enableRefresh={true}
                    data={dataSource}
                    keyExtractor={this._keyExtractor}
                    renderItem={this._renderItem}
                    ItemSeparatorComponent={this._renderItemSeparator}
                    onRefresh={this._onRefresh}
                    onEndReached={this._onEndReached}
                    ListHeaderComponent={this._renderHeader}
                    style={styles.listView}
                />
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#fff'
    },
    headerContainer: {
        flex: 1
    },

    listView: {
        flex: 1,
    },

    topImage: {
        width: Theme.screenWidth,
        height: 157,
    },
    topTitle: {
        position: 'absolute',
        left: 16,
        top: 126,
        fontSize: FontSize(12),
        color: "#ffffff",
    },
    content: {
        fontSize: FontSize(12),
        color: '#9d9d9d',
        marginLeft: 15,
        marginRight: 15,
        marginTop: 15,
    },
    cutLine: {
        width: Theme.screenWidth - 30,
        height: Theme.minPixel,
        backgroundColor: '#f4f4f4',
        marginLeft: 15,
        marginRight: 15,
        marginTop: 15,
        marginBottom: 15,
    },
    itemView: {
        alignItems: 'center',
        flexDirection: 'column',
        backgroundColor: '#fff',
    },
    itemContent: {
        flexDirection: 'row',
        justifyContent: 'center',
    },
    itemInfoCon: {
        flex: 1,
        marginTop: 13,
        marginBottom: 13,
        marginRight: 46,
        marginLeft: 15,
        justifyContent: 'space-between',
    },
    titleText: {
        fontSize: FontSize(12),
        color: "#4a4a4a"
    },
    bottomInfo: {
        justifyContent: 'space-between',
        flexDirection: 'row',
        alignItems: 'center',
    },
    itemTime: {
        fontSize: FontSize(10),
        color: "#929292"
    },

    itemBottomName: {
        fontSize: FontSize(10),
        color: "#929292",
        // height: 60,
    },
    image: {
        width: 105,
        height: 70,
        marginTop: 13,
        marginBottom: 13,
        marginRight: 10,
        borderRadius: 5,
    },
    sep: {
        height: Theme.minPixel,
        backgroundColor: '#f5f5f5',
        marginLeft: 15,
        marginRight: 15,
    },
});

export default WestDetails